﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>FirstJs组件速查表</title>
<meta name="author" content="likaituan's website(likaituan.com)" />
<style type="text/css">
	*{padding:0; margin:0;}
	
	.col1{width:196px; position:absolute; left:0px; top:0px;}
	.col2{width:196px; position:absolute; left:0px; top:75px;}
	.col3{width:196px; position:absolute; left:0px; top:150px;}
	.col4{width:196px; position:absolute; left:0px; top:235px;}
	.col5{width:196px; position:absolute; left:300px; top:0px;}
	.col6{width:196px; position:absolute; left:300px; top:75px;}
	.col7{width:196px; position:absolute; left:300px; top:200px;}	
	.col8{width:196px; position:absolute; left:300px; top:300px;}
	.col9{width:196px; position:absolute; left:300px; top:400px;}
	.col10{width:196px; position:absolute; left:300px; top:500px;}		
	.col11{width:196px; position:absolute; left:600px; top:0px;}
	.col12{width:196px; position:absolute; left:600px; top:75px;}
	.col13{width:196px; position:absolute; left:600px; top:200px;}
	.col14{width:196px; position:absolute; left:600px; top:290px;}
	.col15{width:196px; position:absolute; left:600px; top:375px;}
	.col16{width:196px; position:absolute; left:600px; top:450px;}	

	h1,h2,h3,h4{font-size:12px; font-weight:normal; line-height:1;}
	h1{color:#eee; font-size:13px; line-height:1.2; background:rgb(79,129,189); padding-left:10px;}
	h2{color:#333;}	
	h3{color:#aaa;}
	h4{color:#999;}
	ul,li{list-style:none; font-family:Verdana,Tahoma,Arial,sans-serif,"宋体"; line-height:1;}
	ul{margin-left:10px;}
	a,a:link,a:visited{font-size:12px; color:rgb(64,112,170); text-decoration:none;}
	a:hover{color:white; background-color:rgb(79,129,189);}	
</style>
<script type="text/javascript" src="../1st.js"></script>
<script type="text/javascript">
var item_dir = {
	init : function(dataUrl){
		this.html = "";
		this.lv = 0;
		this.idx = 1;
		F.get(dataUrl).call2json(function(json){
			this.setCol(json);
			var box = F().append("div").ps().pos(10,2).html(this.html);
			var n = box.tags("a").len - 2;
			box.child().each(function(){
				this.first().append("<b> ("+this.tags("a").len+"/"+n+")</b>");
			});
		}.proxy(this));
	},
	//栏目HTML
	setCol : function(a){
		a.each(function(o,i){
			this.html += '<div class="col$idx">'.mix(this);
			this.setHTML(o,i);
			this.html += '</div>';
			this.idx++;
		}.proxy(this));
	},
	//itemHTML
	setHTML : function(o,ii){
		if(o.items && o.items.length>0){
			this.lv++;
			this.html += '<h$lv title="$key">$key</h$lv><ul>'.mix(this).mix(o);
			var oo;
			for(var i=0,l=o.items.length; i<l; i++){
				oo = o.items[i];
				this.html += '<li>';
				if(oo.url){
					this.html += ('<a href="$url" title="$key" onclick="top.tree.open(top.tree.root,['+ii+'])">$key</a>').mix(oo);
				}
				this.setHTML(oo,ii+","+i);
				this.html += '</li>';
			}
			this.html += '</ul>';
			this.lv--;
		}
	}
};
</script>
</head>

<body>
<script type="text/javascript">item_dir.init("data.js");</script>
</body>
</html>